<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello,jqueryui</title>
    <link rel="stylesheet" href="../libs/jqueryui/1.11.4/jquery-ui.css">
    <script type="text/javascript" src="../libs/jquery/1.11.1/jquery.js"></script>
    <script type="text/javascript" src="../libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <style>
        /*.toggler { width: 600px; height: 300px; position: relative; }*/
        #button { padding: .5em 1em; text-decoration: none; }
        /*#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: yellow; }*/
        /*#effect h3 { margin: 0; padding: 0.4em; text-align: center; }*/
    </style>
    <script>
        $(function(){
            var state = true;
            $('#button').click(function(){
                if(state){
                    $('#effect').animate({
                        backgroundColor: 'blue',
                        color: '#ffffff',
                        width: 500
                    },1000);
                }else{
                    $('#effect').animate({
                        backgroundColor: 'yellow',
                        color: '#000000',
                        width: 240
                    },1000);
                }
                state = !state;
            });
        });
    </script>
</head>
<body>

    <div class="toggler">
        <div id="effect" class="ui-widget-content ui-corner-all">
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </div>
        <br>
        <button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
    </div>

</body>
</html>